<template>
	<view class="content u-skeleton" :loading="loading" :animation="true" bgColor="#fff"></u-skeleton>
		<view class="dataList-title">
			<view class="titles-left">
				<u-tabs :list="list" is-scroll="false" inactive-color="#999999" active-color="#333333" :bar-style="barStyle" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<view class="titles-right" @click="setUrl('./../../myPackageA/index/exposure/exposure')">
				<span style="color: #FFCC00;">领养曝光台</span>
				<image src="../../../static/img/baogt.png"></image>
			</view>
		</view>
		<mescroll-uni :height="height - 60 + 'px'" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<skeleton
			   :loading="loading"
				:showTitle="true"
				:showAvatar="false"
				titleWidth="100% - 30rpx"
				titleHeight="266rpx"
				titleMargin="30rpx"
				borderRadius="12px"
				:row="5"
			>
				<view class="itemList-item" v-for="(item,index) in dataList" :key="index" @click="goDetails(item.id,item.pid)">
					<view class="itemList-item-nik">
						<view class="itemList-item-top">
							<view class="itemList-img">
								<image :src="item.cover" style="object-fit:contain;" mode="aspectFill"></image>
							</view>
							<view class="itemList-template">
								<view class="template-title">{{item.title}}</view>
								<view class="template-center">
									<span v-if="item.sex == 1" style="background: rgba(0, 149, 255, 0.08);">
										<image src="../../../static/img/male.png" mode="" style="width: 26px;height: 18px;"></image>
										<!-- <u-icon name="man" color="#0095FF" size="26"></u-icon> -->
									</span>
									<span v-else style="background: rgba(255, 128, 128, 0.08);">
										<image src="../../../static/img/female.png" mode="" style="width: 26px;height: 18px;"></image>
										<!-- <u-icon name="woman" color="#FF8080" size="26"></u-icon> -->
									</span>
									<span>{{item.typeName?item.typeName:'暂无'}}</span>
									<span>{{item.age?item.age:0}}岁</span>
								</view>
								<view class="money">
									<view class="money-left">
										<view class="money-left-money">{{item.price?'¥'+item.price:'免费领养'}}</view>
										<!-- <view class="money-left-money2"><span>￥600</span><span>保证金</span></view> -->
									</view>
									<view class="money-right">
										<span>{{item.hasApplyCount?item.hasApplyCount+'人申请领养':'前往申请领取'}}</span>
									</view>
								</view>
								<view class="itemList-item-bottom" >
									<span>{{item.nickname}} · {{item.passTime}}</span><span v-if="item.distance !== '0.00km'">{{item.distance}}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</skeleton>
			<view class="adopt-empty" v-if="dataList.length === 0">
				<u-image width="542rpx" height="316rpx" src="@/static/user/none1.png" :lazy-load="true"></u-image>
				<view class="empty-text">暂无数据~</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import Skeleton from '../../../components/J-skeleton/J-skeleton.vue'
	
export default {
	name: 'adopt',
	mixins: [MescrollMixin],
	components: {
		Skeleton
	},
	data() {
		return {
			list: [{
				name: '综合'
			}, {
				name: '猫'
			}, {
				name: '狗'
			}],
			current: 0,
			barStyle: {'background-color': '#FFCC00'},
			page:1,
			size: 10,
			dataList: [],
			acronym: '',
			loading: true
		}
	}, 
	props: ['longitude', 'latitude', 'height'],
	watch: {
		// 判断用户是否更改了位置信息，如果更改了就再次请求接口
		'longitude' () {
			console.log('adopt经纬度变了')
			this.getData(this.acronym)
		}
	},
	methods:{
		getData(acronym){
			this.loading = true
			this.$request(this.commonApi.adoptList + this.page + '/' + this.size, 'GET', {
				acronym,
				latitude: this.latitude?this.latitude:0,
				longitude: this.longitude?this.longitude:0
			}).then(res=>{
				this.loading = false
				this.total = res.data.data.meta.total
				this.dataList = res.data.data.result
				// this.dataList.forEach(item=>{
				// 	item.cover = item.cover.split(',')
				// })
				this.$store.commit('setAdoptList', this.dataList)
			})
		},
		setUrl(e){
			uni.navigateTo({
				url: e
			})
		},
		goDetails(id,pid){
			uni.navigateTo({
				url: './../../myPackageA/index/details/petDetails?id=' + id
			})
		},
		change(index) {
			this.current = index;
			this.loading = true
			switch(this.current) {
				case 0:
					this.acronym = ''
					this.getData('')
					break;
				case 1:
					this.acronym = 'CT'
					this.getData('CT')
					break;
				case 2:
					this.acronym = 'DG'
					this.getData('DG')
					break;
			}
		},
		downCallback () {
			this.mescroll.resetUpScroll();
		},
		upCallback (page) {
			let pageNum = page.num; // 页码, 默认从1开始
			let pageSize = page.size; // 页长, 默认每页10条
			this.$request(this.commonApi.adoptList + pageNum + '/' + pageSize, 'GET', {
				acronym: this.acronym,
				latitude: this.latitude,
				longitude: this.longitude
			}).then(res=>{
				let data = res.data.data.result
				if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
				this.dataList = this.dataList.concat(data); //追加新数据
				this.mescroll.endBySize(res.data.data.meta.perPage, res.data.data.meta.total);
			})
		}
	},
	mounted() {
		this.getData('')
		let dataList = this.$store.getters.getAdoptList
		if (!dataList) {
			this.getData('')
		}
	},
};
</script>

<style lang="scss" scoped>
	.adopt-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.empty-text {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			line-height: 44rpx;
			letter-spacing: 2rpx;
			padding-top: 60rpx;
		}
	}
	.money-left{
		width: 100%;
		.money-left-money{
			width: 100%;
			color: #ED5D4D;
			font-weight: bold;
			font-size: 28rpx;
			line-height: 36rpx;
		}
		.money-left-money2{
			width: 100%;
			display: flex;
			flex-direction: row;
			color: #ED5D4D;
			font-weight: bold;
			font-size: 24rpx;
			span:nth-of-type(2){
				color: #333333;
				font-weight: normal;
				margin-left: 10rpx;
			}
		}
	}
	.money{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		font-size: 28rpx;
		padding-top: 20rpx;
		// position: absolute;
		// bottom: 0;
		view{
			width: 50%;
		}
		.money-right{
			display: flex;
			flex-direction: row-reverse;
			color: #959595;
		}
	}
	.template-center{
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: row;
		font-size: 24rpx;
		line-height: 36rpx;
		span{
			border-radius: 10rpx;
		}
		span:not(:first-child){
			margin-left: 20rpx;
		}
		span:nth-of-type(1){
			width: 36rpx;
			height: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(0, 149, 255, 0.08);
			border-radius: 4rpx;
		}
		span:nth-of-type(2){
			padding: 0 15rpx;
			height: 36rpx;
			display: flex;
			color: #FF9A00;
			align-items: center;
			justify-content: center;
			background: rgba(255, 154, 0, 0.08);
			border-radius: 4rpx;
		}
		span:nth-of-type(3){
			padding: 0 15rpx;
			height: 36rpx;
			display: flex;
			color: #8356F3;
			align-items: center;
			justify-content: center;
			background: rgba(131, 86, 243, 0.08);
			border-radius: 4rpx;
		}
	}
	.itemList-item-bottom{
		width: 100%;
		font-size: 24rpx;
		color: #959595;
		padding: 22rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
	.template-title{
		width: 100%;
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		padding: 22rpx 0;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
	}
	.itemList-template{
		width: 63%;
		// height: 164rpx;
		display: flex;
		// align-items: center;
		flex-direction: column;
		position: relative;
	}
	.itemList-img{
		display: block;
		width: 31%;
		height: 200rpx !important;
		display: table-cell;
		vertical-align: middle;
		border-radius: 15rpx;
		margin-right: 20rpx;
		image{
			display: block;
			width: 220rpx;
			height: 200rpx;
			object-fit: cover;
			border-radius: 15rpx;
			object-fit: cover;
		}
	}
	.itemList-item-top{
		width: 660rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}
	.itemList-item-nik{
		width: 720rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		background: white;
		border-radius: 15rpx;
	}
	.itemList-item{
		width: 100%;
		// min-height: 266rpx;
		// border-bottom: 2px solid #F6F6F6;
		display: flex;
		align-items: center;
		// justify-content: center;
		justify-content: center;
		padding-top: 15rpx;
	}
	.itemList{
		width: 100%;
		// height: calc(100vh - 500rpx);
		height: calc(100% - 120rpx);
		// background: pink;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		background-color: #fff;
	}
	.triangle-up {
	    width: 0;
	    height: 0;
	    border-left: 20rpx solid transparent;
	    border-right: 20rpx solid transparent;
	    border-bottom: 20rpx solid #FFFFFF;
		position: absolute;
		bottom: 0;
	}
	.titles-right{
		width: 60%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		font-size: 28rpx;
		font-weight: 600;
		color: #454549;
		line-height: 40rpx;
		z-index: 9999;
		image{
			width: 36rpx;
			height: 32rpx;
			margin-right: 8rpx;
		}
	}
	.titles-left{
		width: 40%;
		height: 100%;
		z-index: 9999;
	}
	.dataList-title{
		// width: 100%;
		// height: 120rpx;
		// background: red;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		padding: 20rpx 30rpx 20rpx 10rpx;
		background-color: #fff;
		border-radius: 24rpx 24rpx 0px 0px;
	}
.content {
	width: 100%;
	height: 100%;
}
</style>
